<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CORS 健康检查测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        h1,
        h2 {
            color: #2c3e50;
        }

        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        #response {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Courier New', Courier, monospace;
        }

        .success {
            border-color: #2ecc71;
            background-color: #e8f8f5;
            color: #1abc9c;
        }

        .error {
            border-color: #e74c3c;
            background-color: #fdedec;
            color: #c0392b;
        }
    </style>
</head>

<body>
    <h1>CORS 健康检查测试</h1>
    <div style="margin-bottom: 20px;">
        <label for="hostInput">主机地址:</label>
        <input type="text" id="hostInput" value="192.168.3.220" style="padding: 8px; margin-right: 10px; width: 150px;">

        <label for="portInput">端口:</label>
        <input type="text" id="portInput" value="5555" style="padding: 8px; margin-right: 10px; width: 80px;">

        <label for="pathInput">路径:</label>
        <input type="text" id="pathInput" value="/health" style="padding: 8px; width: 150px;">
    </div>
    <p>点击下面的按钮，将从浏览器向指定服务地址发送一个请求。</p>
    <p>如果您的 CORS 配置正确，您将看到一个绿色的框，其中包含JSON格式的健康状态数据。如果配置不正确或服务未运行，您将看到一个红色的错误框。</p>
    <div>
        <span id="requestUrl"
            style="font-family: monospace; margin-right: 10px;">http://192.168.3.220:5555/health</span>
        <button id="testButton">发送请求</button>
    </div>
    <h2>响应结果:</h2>
    <pre id="response">等待发送请求...</pre>

    <script>
        // 更新显示的URL
        function updateRequestUrl() {
            const host = document.getElementById('hostInput').value;
            const port = document.getElementById('portInput').value;
            const path = document.getElementById('pathInput').value;

            // 确保路径以/开头
            const formattedPath = path.startsWith('/') ? path : `/${path}`;

            const url = `http://${host}:${port}${formattedPath}`;
            document.getElementById('requestUrl').textContent = url;
            return url;
        }

        // 初始化时更新URL显示
        document.addEventListener('DOMContentLoaded', updateRequestUrl);

        // 当输入框内容变化时更新URL显示
        document.getElementById('hostInput').addEventListener('input', updateRequestUrl);
        document.getElementById('portInput').addEventListener('input', updateRequestUrl);
        document.getElementById('pathInput').addEventListener('input', updateRequestUrl);

        // 发送请求
        document.getElementById('testButton').addEventListener('click', () => {
            const responseDiv = document.getElementById('response');
            responseDiv.textContent = '正在请求...';
            responseDiv.className = '';

            const requestUrl = updateRequestUrl();

            fetch(requestUrl)
                .then(response => {
                    if (!response.ok) {
                        // 对于网络错误（包括CORS问题），fetch会进入catch块
                        // 但对于像404或500这样的HTTP错误，需要我们手动抛出
                        throw new Error(`HTTP 错误! 状态码: ${response.status} ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    responseDiv.textContent = JSON.stringify(data, null, 2);
                    responseDiv.className = 'success';
                })
                .catch(error => {
                    console.error('请求失败:', error);
                    let errorMessage = `请求失败: ${error.message}`;
                    if (error instanceof TypeError) {
                        errorMessage += '\n\n这通常是由于网络问题或CORS策略阻止了请求。请检查浏览器开发者工具(F12)的控制台(Console)选项卡以获取更详细的错误信息。';
                    }
                    responseDiv.textContent = errorMessage;
                    responseDiv.className = 'error';
                });
        });
    </script>
</body>

</html>